<script  setup>
import  userStore from '@/store/modules/user.js'
import {ArrowDown } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { RouterLink } from 'vue-router'

// 仓库 
const store = userStore()

// 登录
const LoginShow =  () => {
    store.setDialogShow(true)
}

// 退出登陆
const loginOut = () => {
    // 提示用户
    ElMessageBox.confirm("您确定要退出登录吗？", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        // 退出登录逻辑
        store.loginOut()
        ElMessage.success("退出登录成功")
    }).catch(() => {

    })
}

</script>
<template >
    <div class="top">
        <div class="content">
            <div class="left">
                <img src="../assets/images/logo.png" alt="">
                <p>尚医通  预约挂号统一平台</p>
            </div>
            <div class="right">
                <p class="help">帮助中心</p>
                <p class="login" v-if="!store.userInfo.name" @click="LoginShow">登录/注册</p>
                <el-dropdown v-else>
                    <span class="el-dropdown-link">
                    {{ store.userInfo.name }}
                    <el-icon class="el-icon--right">
                        <ArrowDown />
                    </el-icon>
                    </span>
                    <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item><RouterLink style="text-decoration: none; color: #666" to="/">首页</RouterLink></el-dropdown-item>
                        <el-dropdown-item><RouterLink style="text-decoration: none; color: #666" to="/user/vip">实名认证</RouterLink></el-dropdown-item>
                        <el-dropdown-item><RouterLink style="text-decoration: none; color: #666;" to="/user/order">订单管理</RouterLink></el-dropdown-item>
                        <el-dropdown-item><RouterLink style="text-decoration: none; color: #666;" to="/user/patient">就诊人管理</RouterLink></el-dropdown-item>
                        <el-dropdown-item @click="loginOut" >退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .top {
        position: fixed;
        top: 0;
        z-index: 999;
        width: 100%;
        height: 70px;
        // background-color: pink;
        display: flex;
        justify-content: center;
        .content {
            width: 1200px;
            height: 70px;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            .left  {
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                    width: 50px;
                    height: 50px;
                    margin-right: 10px;
                }
                p {
                    font-size: 20px;
                    color: #55a6fe;
                    cursor: pointer;

                }
            }   
            .right  {
                display: flex;
                justify-content: center;
                align-items: center;
                .help {
                    font-size: 16px;
                    color:#666;
                    margin-right: 30px;
                    cursor: pointer;
                }
                .login {
                    font-size: 16px;
                    color: #666;
                    cursor: pointer;

                }
            }
        }
    }
</style>